<template>
	<view class="container">
		<view class="midBox" style="margin-top: 0;">
			<view class="list flex-ac">
				<view class="hd"><text style="color: red;">*</text>报案号</view>
				<view class="md">
					<input type="text" v-model="params.accidentNo" placeholder="请输入报案号" placeholder-style="color:#999">
				</view>
			</view>
			<view class="list flex-ac" @click.stop="$Jump.Open('../repair/selCar')">
				<view class="hd"><text style="color: red;"></text>车牌号</view>
				<view class="md">
					<input type="text" v-model="carNo" placeholder="请选择" placeholder-style="color:#999" disabled>
				</view>
				<view class="bd">
					<u-icon name="arrow-right" size="24" color="#999"></u-icon>
				</view>
			</view>
			<view class="list flex-ac" @click="$Jump.Open('../repair/selDriver')">
				<view class="hd"><text style="color: red;">*</text>司机姓名</view>
				<view class="md">
					<input type="text" v-model="diverName" placeholder="请选择" disabled placeholder-style="color:#999">
				</view>
				<view class="bd">
					<u-icon name="arrow-right" size="24" color="#999"></u-icon>
				</view>
			</view>
			<view class="list flex-ac">
				<view class="hd"><text style="color: red;">*</text>发生地点</view>
				<view class="md">
					<input type="text" v-model="params.address" placeholder="请输入发生地点" placeholder-style="color:#999">
				</view>
			</view>
			
			<view class="list flex-ac">
				<view class="hd"><text style="color: red;">*</text>事故日期</view>
				<view class="md" @click="show = true">
					<input type="text" v-model="params.accidentTime" disabled placeholder="请选择"  placeholder-style="color:#999">
				</view>
				<view class="bd">
					<u-icon name="arrow-right" size="24" color="#999"></u-icon>
				</view>
			</view>
			<u-picker mode="time" v-model="show" title="选择时间" :params="paramsTime" @confirm="addFuelTime"></u-picker>
			
			<view class="midBox" style="margin-top: 0;">
				<view class="image-tit"><text style="color: red;">*</text>责任认定</view>
				<view class="textBox">
					<view class="text">
						<textarea name="" v-model="params.dutyExplain" placeholder="请输入责任认定" placeholder-style="color:#CCCCCC" id="" cols="30" rows="10"></textarea>
					</view>
				</view>
			</view>
			
			<view class="midBox" style="margin-top: 0;">
				<view class="image-tit"><text style="color: red;">*</text>事故原因</view>
				<view class="textBox">
					<view class="text">
						<textarea name="" v-model="params.accidentExplain" placeholder="请输入责任认定" placeholder-style="color:#CCCCCC" id="" cols="30" rows="10"></textarea>
					</view>
				</view>
			</view>
			
			<view class="midBox">
				<view class="image-tit"><text style="color: red;">*</text>上传图片</view>
				<view class="imageBox flex-ac">
					<view class="item" v-for="(item,index) in mileImgs" :key="index">
						<image class="full" :src="item" mode="aspectFit"></image>
						<image src="../../../static/img/del.png" class="del" @click="delMileImage(index)" mode=""></image>
					</view>
					<view class="item" @click="uploadMileImage">
						<image src="../../../static/img/add-icon.png" mode="aspectFill" class="full"></image>
					</view> 
				</view>  
			</view>
			<view style="width: 100%; height: 14rpx; background-color: #f6f6f6;"></view>
			<view class="list flex-ac">
				<view class="hd"><text style="color: red;">*</text>录入人</view>
				<view class="md">
					<input type="text" v-model="params.lossUserName" placeholder="请输入" placeholder-style="color:#999">
				</view>
			</view>
			<view class="list flex-ac">
				<view class="hd"><text style="color: red;">*</text>损失金额</view>
				<view class="md">
					<input type="digit" v-model="params.lossMoney" placeholder="请输入" placeholder-style="color:#999">
				</view>
			</view>
			<view class="list flex-ac">
				<view class="hd"><text style="color: red;">*</text>考核金额</view>
				<view class="md">
					<input type="digit" v-model="params.padPayMoney" placeholder="请输入" placeholder-style="color:#999">
				</view>
			</view>
			<view class="list flex-ac">
				<view class="hd"><text style="color: red;">*</text>赔偿金额</view>
				<view class="md">
					<input type="digit" v-model="params.insuranceMoney" placeholder="请输入" placeholder-style="color:#999">
				</view>
			</view>
			<view class="list flex-ac">
				<view class="hd">修理厂</view>
				<view class="md">
					<input type="text" v-model="params.repairFactory" placeholder="请输入" placeholder-style="color:#999">
				</view>
			</view>
			<view class="list flex-ac">
				<view class="hd">医院</view>
				<view class="md">
					<input type="text" v-model="params.hospital" placeholder="请输入" placeholder-style="color:#999">
				</view>
			</view>
			<view class="list flex-ac">
				<view class="hd">法院</view>
				<view class="md">
					<input type="text" v-model="params.court" placeholder="请输入" placeholder-style="color:#999">
				</view>
			</view>
			<view class="midBox" style="margin-top: 0;">
				<view class="image-tit" style="color: #999;">备注</view>
				<view class="textBox">
					<view class="text">
						<textarea name="" v-model="params.remark" placeholder="请输入" placeholder-style="color:#CCCCCC" id="" cols="30" rows="10"></textarea>
					</view>
				</view>
			</view>
		</view>
		<!-- <u-gap :height="140 + botDis"></u-gap> -->
		<view class="foot">
			<view class="btnBox flex-ac">
				<view class="btn-1 middle" @click="sureAdd">确定</view>
			</view>
			<x-botSpace></x-botSpace>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				botDis: this.$app.globalData.botDis,
				show: false,
				show1: false,
				type: 1, //1新增  2编辑
				paramsTime: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,  
					second: true
				},
				params:{
					id: '',
					accidentExplain:"", // 事故原因
					accidentNo:"", // 报案号
					accidentTime:"", // 事故日期
					address:"", // 发生地点
					court:"", // 法院
					dutyExplain:"", // 责任认定
					hospital:"", // 医院
					imgUrls:"", // 事故图片
					insuranceMoney:"",  // 赔偿金额
					lossMoney:"",  // 损失金额
					lossUserName:"",  // 录入人
					padPayMoney:'', //考核金额
					remark: '', // 备注
					repairFactory: '', //修理厂
					tcarId: '', // 车辆id
					tdriverId: '', // 司机id
				},
				carNo:'',
				diverName: '',
				mileImgs:[]
			}
		},
		onLoad(opt) {
			if(opt) console.log('opt:', opt)
			this.params.accidentTime = this.$Common.formatTime(this.$Common.currentTime(), "Y-M-D h:m:s")
			if(opt.id){
				this.type = 2
				this.params.repairId = opt.id
				uni.setNavigationBarTitle({
					title: '编辑'
				})
				this.getInfo(opt.id)
			}else{
				
			}
		},
		methods: {
			// 确认添加
			sureAdd(){
				this.params.imgUrls = this.mileImgs.toString()
				if(this.params.accidentExplain === '') return this.$Toast.message('请完善信息')
				if(this.params.accidentNo === '') return this.$Toast.message('请完善信息')
				if(this.params.accidentTime === '') return this.$Toast.message('请完善信息')
				if(this.params.imgUrls === '') return this.$Toast.message('请完善信息')
				if(this.params.address === '') return this.$Toast.message('请完善信息')
				if(this.params.dutyExplain === '') return this.$Toast.message('请完善信息')
				if(this.params.insuranceMoney === '') return this.$Toast.message('请完善信息')
				if(this.params.lossMoney === '') return this.$Toast.message('请完善信息')
				if(this.params.lossUserName === '') return this.$Toast.message('请完善信息')
				if(this.params.padPayMoney === '') return this.$Toast.message('请完善信息')
				// if(this.params.tcarId === '') return this.$Toast.message('请完善信息')
				if(this.params.tdriverId === '') return this.$Toast.message('请完善信息')
				this.$Net.post('/carAccident/add', this.params).then(res=>{
					console.log('res:', res)
					this.$Toast.messageIcon('添加成功')
					setTimeout(()=>{
						this.$Jump.Back(1)
					}, 1500)
				})
			},
			sureEdit(){
				this.params.repairImgs = this.mileImgsId.toString()
				if(this.params.applyPerson === '') return this.$Toast.message('请完善信息')
				if(this.params.estimateTakeTime === '') return this.$Toast.message('请完善信息')
				if(this.params.handler === '') return this.$Toast.message('请完善信息')
				if(this.params.repairImgs === '') return this.$Toast.message('请完善信息')
				if(this.params.repairReason === '') return this.$Toast.message('请完善信息')
				if(this.params.repairShop === '') return this.$Toast.message('请完善信息')
				if(this.params.repairTime === '') return this.$Toast.message('请完善信息')
				this.$Net.post('/driverApi/vehicleRepair/edit', this.params).then(res=>{
					console.log('res:', res)
					this.$Toast.messageIcon('修改成功')
					setTimeout(()=>{
						this.$Jump.Back(1)
					}, 1500)
				})
			},
			// 上传图片
			uploadMileImage(){
				this.$Net.uploadFile('/imgs/uploadImage').then(res=>{
					console.log('图片上传:', res)
					this.mileImgs.push(res.data)
					// this.mileImgsId.push(res.data.fileId)
				})
			},
			// 删除图片
			delMileImage(index){
				this.mileImgs.splice(index, 1)
				this.mileImgsId.splice(index, 1)
			},
			addFuelTime(e){
				this.params.accidentTime = e.year + "-" + e.month + '-' + e.day + ' ' + e.hour + ":" + e.minute + ":" + e.second 
			},
			addTakeTime(e){
				this.params.takeCarTime = e.year + "-" + e.month + '-' + e.day + ' ' + e.hour + ":" + e.minute + ":" + e.second 
			},
			selRepairType(e){
				console.log(e)
				this.repairTypeName = this.repairType[e[0]]
				this.params.type = e[0] + 1
				if(this.params.type == 2){
					this.params.isMaterial = 0
				}else{
					this.params.isMaterial = 1
				}
			},
			selClType(e){
				console.log(e)
				this.cl_TypeName = this.cl_Type[e[0]]
				this.params.isMaterial = e[0]
			},
			// 获取原订单信息
			getInfo(id){
				this.$Net.get('/driverApi/vehicleRepair/detail', {
					repairId: id
				}).then(res=>{
					console.log('详情:', res)
					this.params.applyPerson = res.data.applyPerson
					this.params.driverId = res.data.driverId
					this.params.estimateTakeTime = res.data.estimateTakeTime
					this.params.handler = res.data.handler
					this.params.licensePlateNumber = res.data.licensePlateNumber
					this.params.remark = res.data.remark
					this.params.repairReason = res.data.repairReason
					this.params.repairShop = res.data.repairShop
					this.params.repairTime = res.data.repairTime
					this.params.vehicleId = res.data.vehicleId
					this.params.vehicleType = res.data.vehicleType
					this.carTypeName = res.data.vehicleType === '1' ? '自有' :  res.data.vehicleType === '2' ? '专线' : '外调'
					this.$Net.imgPath(res.data.repairImgs).then(res=>{
						console.log('图片:', res)
						this.mileImgs = res
					})
				})
			},
			// 获取车辆信息
			getCarInfo(){
				this.$Net.get('/driverApi/vehicle/info').then(res=>{
					console.log('车辆信息:', res.data)
					this.params.vehicleId = res.data.vehicleId
					this.params.licensePlateNumber = res.data.licensePlate
					this.params.vehicleType = res.data.vehicleType
					this.carTypeName = res.data.vehicleType == 1 ? '自有' : res.data.vehicleType == 2 ? '专线' : '外调'
					
				})
			},
			// 获取司机信息
			getDriverInfo(){
				this.$Net.get('/driverApi/driver/info').then(res=>{
					console.log('司机信息:', res.data)
					this.params.applyPerson = res.data.driverName
					this.params.driverId = res.data.driverId
				})
			}
		}
	}
</script>

<style lang="scss">
	page{ background-color: #f9f9f9; }
</style>

<style lang="scss" scoped>
	.foot {
		width: 100%;
		padding: 30rpx;
		padding-top: 60rpx;
		.btnBox {
			width: 100%;
	
			.btn-1 {
				flex: 1;
				height: 90rpx;
				background: #1684FC;
				border-radius: 10rpx;
				color: #ffffff;
				font-size: 34rpx;
			}
	
			.btn-2 {
				flex: 1;
				height: 90rpx;
				border: 1px solid #1684FC;
				border-radius: 10rpx;
				color: #1684FC;
				font-size: 34rpx;
			}
		}
	}
	.midBox{
		width: 100%;
		// margin-top: 20rpx;
		background-color: #fff;
		.image-tit{
			padding-left: 40rpx;
			padding-top: 30rpx;
			color: #333;
		}
		.textBox{
			width: 100%;
			margin-top: 32rpx;
			padding: 0 24rpx;
			padding-bottom: 32rpx;
			.text{
				border-radius: 8rpx;
				padding: 16rpx;
				width: 100%;
				height: 248rpx;
				background-color: #F6F6F6;
				textarea{
					width: 100%;
					height: 100%;
				}
			}
		}
		.imageBox{
			padding: 30rpx 40rpx 24rpx;
			.item{
				width: 160rpx;
				height: 160rpx;
				margin-right: 30rpx;
				position: relative;
				.del{
					width: 32rpx;
					height: 32rpx;
					position: absolute;
					top: -12rpx;
					right: -12rpx;
					z-index: 10;
				}
			}
		}
		.list{
			width: 100%;
			height: 96rpx;
			padding-right: 24rpx;
			padding-left: 24rpx;
			border-bottom: 1rpx solid #e5e5e5;
			.hd{
				width: 234rpx;
				color: #333;
			}
			.md{
				flex: 1;
				height: 100%;
				input{
					width: 100%;
					height: 100%;
					line-height: 94rpx;
					text-align: right;
					padding-right: 20rpx;
				}
			}
			.bd{
				color: #999;
				image{
					width: 30rpx;
					height: 30rpx;
				}
			}
		}
		.list:last-child{
			border: none;
		}
	}
	.head{
		width: 100%;
		height: 288rpx;
		background-color: #fff;
		.list{
			width: 100%;
			height: 96rpx;
			.hd{
				width: 234rpx;
				padding-left: 40rpx;
				color: #999;
			}
			.bd{
				flex: 1;
			}
		}
	}
	// @import './style.scss';
</style>
